<script setup>

import {listTree} from '@/api/system/park/building'
import {addCheck, delCheck, getCheckById, updateCheck} from '@/api/system/park/check'

import {
  getCheckAll,
  detail
} from '@/api/system/park/check'


export default {
  data() {
    return {
      dialogVisible: false,
      queryParams: {
        bulidingId: "",//楼栋id
        floorId: "",//楼层id
        roomId: "",//房间id
        serialNumber: "",//序列编号
        equipmentName: "",//设备名称
      },
      treeChoose: [],
      checkList: [],
      treeList: [],
      treeData: [],
      checkTypeList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      ruleForm: {
        serialNumber: '',
        equipmentName: '',
        username: '',
        password: '',
        ip: '',
        port: '',
        checkType: '',
        bulidingId: "",
        floorId: "",
        roomId: "",
        label: ""
      },
      rules: {
        serialNumber: [
          {required: true, message: '请输入序列编号', trigger: 'blur'},
        ],
        equipmentName: [
          {required: true, message: '请输入设备名称', trigger: 'blur'},
        ],
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        ip: [
          {required: true, message: '请输入ip地址', trigger: 'blur'},
        ],
        port: [
          {required: true, message: '请输入端口号', trigger: 'blur'},
        ]
      }
    }
  }, methods: {
    resetQuery() {
      this.queryParams = [];
      this.resetForm("queryParams");
      this.queryMethods();
    },
    queryMethods() {
      let that = this;
      getCheckAll(that.queryParams).then(function (res) {
        console.log(res)
        that.checkList = res.data;
      })
    },
    addCheckShow() {
      this.ruleForm.serialNumber = ''
      this.ruleForm.equipmentName = '',
        this.ruleForm.username = '',
        this.ruleForm.password = '',
        this.ruleForm.ip = '',
        this.ruleForm.port = '',
        this.ruleForm.checkType = '',
        this.ruleForm.bulidingId = "",
        this.ruleForm.floorId = "",
        this.ruleForm.roomId = "",
        this.dialogVisible = true;
      this.ruleForm.id = "";
      this.ruleForm.label = ""
      this.ruleForm.addressId = ""
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    queryNodeClick(data, node, self) {
      console.log("data=> " + data)
      console.log("node=> " + node)
      console.log("self=> " + self)
      let that = this;
      that.queryParams = {
        bulidingId: "",
        floorId: "",
        roomId: ""
      };
      console.log(data)
      if (data.floorBuildingid == undefined && data.roomFloorid == undefined) {
        that.queryParams.bulidingId = data.id;
      } else if (data.floorBuildingid != undefined) {
        that.queryParams.floorId = data.id;
      } else if (data.roomFloorid != undefined) {
        that.queryParams.roomId = data.id;
      }
      that.queryMethods();
    },
    handleNodeClick(data) {
      let that = this;
      that.ruleForm.addressId = data.name;
      that.ruleForm.label = data.name
      console.log(data)


      that.ruleForm.bulidingId = "";
      that.ruleForm.floorId = "";
      that.ruleForm.roomId = "";


      if (data.floorBuildingid == undefined && data.roomFloorid == undefined) {
        that.ruleForm.bulidingId = data.id;
      } else if (data.floorBuildingid != undefined) {
        that.ruleForm.floorId = data.id;
      } else if (data.roomFloorid != undefined) {
        that.ruleForm.roomId = data.id;
      }
      console.log("表单:" + JSON.stringify(that.ruleForm))
    },
    submitForm(formName) {
      let that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.ruleForm.id != "") {
            updateCheck(that.ruleForm).then((res) => {
              if (res.code == 200) {
                that.$message({
                  message: '修改成功',
                  type: 'success'
                });
              } else {
                that.$message({
                  message: '修改失败',
                  type: 'error'
                });
              }
              that.dialogVisible = false;
              that.queryMethods();
            })
          } else {
            addCheck(that.ruleForm).then(function (res) {
              if (res.code == 200) {
                that.$message({
                  message: '添加成功',
                  type: 'success'
                });
              } else {
                that.$message({
                  message: '添加失败',
                  type: 'error'
                });
              }
              that.dialogVisible = false;
              that.queryMethods();
            })
          }
        } else {
          return false;
        }
      });
    },
    deleteCheck(id) {
      let that = this;
      that.$confirm('此操作将永久删除该该设备吗?, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCheck(id).then(function (res) {
          if (res.code == 200) {
            that.$message({
              message: '删除成功',
              type: 'success'
            });
          } else {
            that.$message({
              message: '删除失败',
              type: 'error'
            });
          }
          that.queryMethods();
        })
      }).catch(() => {
        that.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    updateCheckShowData(id) {
      let that = this;
      getCheckById(id).then(function (res) {
        that.ruleForm = res.data;
        that.ruleForm.addressId = res.data.objName;
        that.ruleForm.lable = res.data.objName;
        console.log(res)
      })
      that.dialogVisible = true;
    }
  },
  created() {
    let that = this;
    listTree().then(function (res) {
      that.treeList = res.data;
      that.treeData = res.data;
    })
    detail().then(function (res) {
      that.checkTypeList = res.data;
    })
    that.queryMethods();
  }
}
</script>

<template>
  <div class="app-container">
    <div style="float: left;height: 100% ; width: 20%">
      <el-form :model="queryParams" :inline="true">
        <el-form-item>
          <el-input
            style="width: 250px"
            v-model="queryParams.buildingName"
            placeholder="请输入位置信息"
            clearable
            size="small"
          />
        </el-form-item>
      </el-form>
      <el-tree :data="treeList" :props="defaultProps" @node-click="queryNodeClick"></el-tree>
    </div>
    <div style="float: left;height: 100% ; width: 80%">
      <el-form :model="queryParams" :inline="true">
        <el-form-item label="设备编号">
          <el-input
            v-model="queryParams.serialNumber"
            placeholder="请输入设备编号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input
            v-model="queryParams.equipmentName"
            placeholder="请输入设备名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="queryParams.value1"
            style="width: 250px"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryMethods()">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" style="margin-top:30px;margin-bottom: 30px" icon="el-icon-plus" @click="addCheckShow()">
        添加
      </el-button>


      <div class="parent-flex">
        <div v-for="item in checkList" style="background-color:#f2f2f2;margin-bottom:20px ;margin-right: 20px;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-button style="font-size: 20px" type="text" @click="updateCheckShowData(item.id)">
                {{ item.serialNumber }}
              </el-button>
              <i class="el-icon-tickets" style="float: right"></i>
            </div>
            <div class="pMargin">
              <p>设备位置: {{ item.objName }}</p>
              <p>设备ip: {{ item.ip }}</p>
              <p>设备序列号: {{ item.serialNumber }}</p>
              <p>
                状态: <span style="color: red">{{ item.status == 1 ? "在线" : "离线" }}</span>
                <el-tooltip content="刷新状态">
                  <i class="el-icon-refresh"></i>
                </el-tooltip>
                <el-tooltip content="订阅">
                  <i class="el-icon-help"></i>
                </el-tooltip>
                <el-tooltip content="删除">
                  <i class="el-icon-delete" @click="deleteCheck(item.id)"></i>
                </el-tooltip>
              </p>
            </div>
          </el-card>
        </div>
      </div>


      <el-dialog
        title="添加人脸闸机设备"
        :visible.sync="dialogVisible"
        width="40%">
        <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="序列编号" prop="serialNumber">
            <el-input v-model="ruleForm.serialNumber"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="equipmentName">
            <el-input v-model="ruleForm.equipmentName"></el-input>
          </el-form-item>
          <el-form-item label="考勤类型">
            <el-select style="width: 190px;" v-model="ruleForm.checkType" placeholder="请选择考勤类型">
              <el-option
                v-for="o in checkTypeList"
                :key="o.dictLabel"
                :value="o.dictLabel"
                :label="o.dictLabel"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="ip地址" prop="ip">
            <el-input v-model="ruleForm.ip"></el-input>
          </el-form-item>
          <el-form-item label="端口号" prop="port">
            <el-input v-model="ruleForm.port"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="空间位置">
            <el-select style="width: 500px;" v-model="ruleForm.addressId" placeholder="请选择空间位置" ref="selectTree">
              <el-option :key="ruleForm.addressId" :value="ruleForm.addressId" :label="ruleForm.label" hidden="hidden"/>
              <el-tree :data="treeData"
                       :props="defaultProps"
                       node-key="id"
                       accordion
                       highlight-current
                       @node-click="handleNodeClick"/>
            </el-select>
            <!--            <treeselect v-model="ruleForm.deptId" :options="treeList" placeholder="请选择归属部门"  @select="selectDepart" />-->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.parent-flex {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}

.box-card {
  width: 350px;
  height: 270px;
}

.pMargin p {
  margin-top: 25px;
}

</style>
